<template>
	<view>
		<up-tabs lineColor="#4dca7f" lineWidth="100rpx" :current="curTabIndex" :list="tabList"
			@click="click" style="width: 100%;background-color: #4e77cf;"
			:activeStyle="{ color: '#fff' }" :inactiveStyle="{ color: '#f7f7f7' }"
			:scrollable="false"></up-tabs>
		<!-- 自提订单 -->
		<view v-if="curTabIndex==0">
			<view style="background-color: #fff;padding: 20rpx;" v-if="carSaleOrder">
				<view>
					<text style="color:#9a9baf">单据编号</text>
					<text style="margin-left: 20rpx;">{{carSaleOrder.saleid}}</text>
				</view>
				<view style="margin-top: 10rpx;">
					<text style="color:#9a9baf">创建时间</text>
					<text style="margin-left: 20rpx;">{{carSaleOrder.create_time}}</text>
				</view>
				<view style="margin-top: 10rpx;">
					<text style="color:#9a9baf">单据时间</text>
					<text style="margin-left: 20rpx;">{{carSaleOrder.create_time}}</text>
				</view>
				<view style="margin-top: 10rpx;">
					<text style="color:#9a9baf">客户名称</text>
					<text style="margin-left: 20rpx;">{{carSaleOrder.cusname}}</text>
				</view>
				<!-- <view style="margin-top: 10rpx;">
					<text style="color:#9a9baf">客户电话</text>
					<text style="margin-left: 20rpx;">{{carSaleOrder.cusname}}</text>
				</view> -->
				<view style="margin-top: 10rpx;">
					<text style="color:#9a9baf">销售仓库</text>
					<text style="margin-left: 20rpx;">{{carSaleOrder.whname}}</text>
				</view>
			</view>


			<view style="margin-top: 20rpx;">
				<view class="header"
					style="font-size: 28rpx;font-weight: 300;background-color: #e3e8fb;padding: 8rpx 20rpx;display: flex;">
					<view style="flex:1">商品</view>
					<view style="width:180rpx">销售价</view>
					<view style="width:180rpx">数量/小计</view>
				</view>
				<view>
					<view  style="background-color: #ffffff;position: relative;" v-for="(item,index) in carSaleList">
						<view @click="item.show = !item.show" style="display: flex;padding:  20rpx 20rpx 0rpx 20rpx;">
							<view style="flex:1">
								<view style="font-size: 24rpx;">
									<text
										style="color: #3c9cff;padding: 4rpx 16rpx;background-color: #edf0f9;">{{index+1}}</text>
									<text
										style="font-weight: bold;font-size: 30rpx;margin-left: 10rpx;">{{item.product_info.pname}}</text>
								</view>
								<view style="font-size: 24rpx;padding: 6rpx 0;">
									<text style="margin-left: 10rpx;">{{item.product_info.formulatext}}</text>
								</view>
							</view>
							<!-- 销售价 -->
							<view style="width:180rpx;font-weight: bold;font-size: 30rpx;">
								<view style="font-weight: bold;font-size: 30rpx;">
									{{'￥'+ item.unitprice + '/' + item.unit}}
								</view>
								
							</view>
							<view style="width:180rpx">
								<view style="font-weight: bold;font-size: 30rpx;">
									{{item.number+''+item.unit}}
								</view>
								<view style="font-size: 24rpx;font-weight: bold;color: #3c9cff;">
									{{'￥' + item.orderamount}}
								</view>
							</view>
							<view style="position: absolute;transform: rotate(20deg);transform-origin: center center;left:200rpx;top:20rpx">
								<up-tag :text="item.saletype" plain size="mini" type="primary"></up-tag>
							</view>
						</view>
					</view>
				</view>

				<!-- 占位置 -->
				<view :style="{height:paddingBottom+'px'}"></view>
				<view style="background-color: #ffffff;
							position: fixed;
							bottom: 0;
							left: 0;
							width: 100%;
							z-index: 998;
							box-sizing: content-box;
							border-top: 1px solid #dedede;
							padding-bottom: env(safe-area-inset-bottom);" id="bottom-box">
					<view style="margin-left: auto;text-align: right;padding: 20rpx;">
						<text>合计：</text>
						<text
							style="font-size: 48rpx;color:#C06E5D;font-weight: bold;">￥{{carSaleOrder?carSaleOrder.orderamount:'0'}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 货款 -->
		<view v-if="curTabIndex===1">
			<view style="background-color: #fff;padding: 20rpx;">

				<view style="display: flex;justify-content: space-between;">
					<text style="color:#9a9baf">订单编号</text>
					<text style="margin-left: 20rpx;">{{carSaleOrder.saleid}}</text>
				</view>
				<!-- <view style="margin-top: 10rpx;display: flex;justify-content: space-between;">
					<text style="color:#9a9baf">结算单位</text>
					<text style="margin-left: 20rpx;">{{carSaleOrder.cusname}}</text>
				</view> -->
				<view style="margin-top: 10rpx;display: flex;justify-content: space-between;">
					<text style="color:#9a9baf">订单金额</text>
					<text style="margin-left: 20rpx;">{{carSaleOrder.orderamount}}</text>
				</view>
				<!-- <view style="margin-top: 10rpx;display: flex;justify-content: space-between;">
					<text style="color:#9a9baf">结算单号</text>
					<text style="margin-left: 20rpx;">2025-08-04 16:15:20</text>
				</view> -->
				<!-- <view style="margin-top: 10rpx;display: flex;justify-content: space-between;">
					<text style="color:#9a9baf">结算金额</text>
					<text style="margin-left: 20rpx;">{{carSaleOrder.saleid}}</text>
				</view> -->
				<view style="margin-top: 10rpx;display: flex;justify-content: space-between;">
					<text style="color:#9a9baf">已结金额</text>
					<text style="margin-left: 20rpx;">{{carSaleOrder.yjamount}}</text>
				</view>
				<view style="margin-top: 10rpx;display: flex;justify-content: space-between;">
					<text style="color:#9a9baf">未结</text>
					<text
						style="margin-left: 20rpx;font-weight: bold;">￥{{carSaleOrder.orderamount-carSaleOrder.yjamount}}</text>
				</view>
			</view>
		</view>


		<!-- <drag-button :isDock="true" :existTabBar="true" text="返回" @btnClick="btnClick" /> -->
	</view>
</template>

<script setup>
	import { ref, reactive, watch, defineExpose, nextTick, computed } from 'vue'
	import { onReady, onLoad } from "@dcloudio/uni-app"
	import { useStore } from "vuex";
	const store = useStore();
	const app = getApp()

	onReady(async () => {
		uni.createSelectorQuery().select('#bottom-box').boundingClientRect(b_data => {
			paddingBottom.value = b_data.height
		}).exec()
	})

	onLoad(async (options) => {
		console.log(options)
		const res = await app.globalData.http.get(`/sale/detail/${options.id}`)
		carSaleOrder.value = res.data.sale
		carSaleList.value = res.data.list
	})

	// 合计
	const orderPriceTotal = computed(() => {
		carSaleList.forEach(item => {

		});
		return total;
	})

	// 创建响应式数据  
	// 页面布局相关变量
	const paddingBottom = ref(0)
	const tabList = reactive([
		{ name: '自提订单' },
		{ name: '货款' }
	]);
	const curTabIndex = ref(0)
	const carSaleOrder = ref(null)
	const carSaleList = ref([])
	// 定义方法  
	function click(item) {
		//console.log('item', item);
		curTabIndex.value = item.index
	}

	// 悬浮按钮点击返回主页
	const btnClick = () => {
		uni.switchTab({
			url: '/pages/work'
		});
	}
</script>

<style lang="scss">

</style>